<template>
	<div class="fire-dispose">
		<div class="record-box" v-if="recordArr && recordArr.length > 0">
			<div v-for="(item, index) in recordArr" :key="index" class="record-item">
				<div class="item-header">
					<div class="header-user">
						<div class="img">{{ item.firePerson ? item.firePerson.substring(item.firePerson.length - 2) : '用户' }}</div>
						<div class="name">{{ item.firePerson ? item.firePerson : '用户' }}</div>
					</div>
					<div class="header-time">{{ item.createTime }}</div>
				</div>
				<div class="item-content">{{ item.message }}</div>
				<div class="item-handle" :class="{ handleFalse: !jurisdiction }">
					<div @click="toEdit(item)">
						<van-icon name="edit" />
						编辑
					</div>
					<div @click="deleteItem(item)">
						<van-icon name="delete-o" />
						删除
					</div>
				</div>
			</div>
		</div>
		<div v-else>
			<van-empty description="暂无处置信息" />
		</div>
		<div v-if="jurisdiction" class="add-dispose" @click="toEdit">
			<van-icon name="add" />
		</div>
	</div>
</template>

<script>
import { Dialog, Toast } from 'vant'
import { getFireDeal, delFireDeal } from '../../api/fire'
import openLink from 'gdt-jsapi/openLink'
export default {
	data() {
		return {
			jurisdiction: false, // 是否具有权限
			fireId: '', // 当前火情id
			userid: '',
			lastName: '',
			recordArr: []
		}
	},
	mounted() {
		document.title = '火情处置'
		let fireQuery = this.$route.query
		if (fireQuery.fireId) {
			this.jurisdiction = fireQuery.isPerson == 'true' ? true : false
			this.fireId = fireQuery.fireId
			this.userid = fireQuery.userid
			this.lastName = fireQuery.lastName
			this.getFireDeal()
		}
	},
	methods: {
		toEdit(item) {
			if (!this.jurisdiction) {
				return
			}
			if (item.id) {
				// this.$router.push({ path: '/edit', query: { isEidt: true, disposeContent: item, fireId: this.fireId } })
				let fireId = encodeURI(this.fireId)
				let message = encodeURI(item.message)
				let messageid = encodeURI(item.id)
				let userid = encodeURI(this.userid)
				let lastName = encodeURI(this.lastName)
				openLink({
					url: `${window.selfURL}edit?appId=huoqing-e9Zlo4q8P45M47CrnaeERj&type=1&messageid=${messageid}&message=${message}&fireId=${fireId}&userid=${userid}&lastName=${lastName}`
				}).then((res) => {
					console.log(res)
				})
			} else {
				// this.$router.push({ path: '/edit', query: { fireId: this.fireId } })
				let fireId = encodeURI(this.fireId)
				let userid = encodeURI(this.userid)
				let lastName = encodeURI(this.lastName)
				openLink({
					url: `${window.selfURL}edit?appId=huoqing-e9Zlo4q8P45M47CrnaeERj&type=1&fireId=${fireId}&userid=${userid}&lastName=${lastName}`
				}).then((res) => {
					console.log(res)
				})
			}
		},
		deleteItem(item) {
			if (!this.jurisdiction) {
				return
			}
			Dialog.confirm({
				title: '确认删除？',
				message: '是否删除，删除后数据将不可恢复！请谨慎操作。',
				confirmButtonColor: '#2074D4'
			})
				.then(() => {
					console.log('删除')
					delFireDeal(item.id, this.userid, this.lastName).then((res) => {
						console.log(res)
						Toast.success('删除成功')
						this.getFireDeal()
					})
				})
				.catch(() => {})
		},
		async getFireDeal() {
			let dealData = await getFireDeal(this.fireId)
			this.recordArr = dealData
		}
	}
}
</script>

<style lang="scss">
.fire-dispose {
	height: 100vh;
	position: relative;
	z-index: 1;
	background: #f4f4f4;
	.record-box {
		.record-item {
			background: #ffffff;
			padding: 0 0.48rem;
			border-bottom: 0.01rem solid rgba(31, 31, 31, 0.09);
			margin-bottom: 0.2rem;
			.item-header {
				display: flex;
				justify-content: space-between;
				padding-top: 0.2rem;
				.header-user {
					.img {
						display: inline-block;
						background: rgb(72, 149, 246);
						vertical-align: bottom;
						border-radius: 50%;
						font-size: 0.26rem;
						line-height: 0.72rem;
						text-align: center;
						width: 0.72rem;
						height: 0.72rem;
					}
					.name {
						display: inline-block;
						font-size: 0.34rem;
						color: #1f1f1f;
						line-height: 0.72rem;
					}
				}
				.header-time {
					font-size: 0.28rem;
					color: rgba(31, 31, 31, 0.65);
					line-height: 0.72rem;
				}
			}
			.item-content {
				font-size: 0.28rem;
				color: rgba(31, 31, 31, 0.65);
				line-height: 0.4rem;
				text-align: left;
				padding: 0.2rem 0;
				border-bottom: 0.01rem solid rgba(31, 31, 31, 0.09);
			}
			.item-handle {
				text-align: right;
				color: rgba(31, 31, 31, 0.65);
				div {
					display: inline-block;
					font-size: 0.28rem;
					line-height: 0.68rem;
					margin-left: 0.84rem;
					.van-icon {
						vertical-align: text-bottom;
					}
				}
			}
			.handleFalse {
				color: rgba(31, 31, 31, 0.3);
			}
		}
	}
	.add-dispose {
		position: fixed;
		right: 2%;
		bottom: 6%;
		font-size: 0.8rem;
		color: #3296fa;
	}
}
</style>